<template>
   <!-- 子菜单组件 -->
   <template v-for="item in menuData" :key="item.path">
      <el-sub-menu v-if="item.children" :index="item.path" v-show="item.disabled">
         <template #title>
            <el-icon v-if="item.icon">
               <component :is="Icons[item.icon]"></component>
            </el-icon>
            <span>{{ item.title }}</span>
         </template>
         <SubMenu :menuData="item.children"></SubMenu>
      </el-sub-menu>
      <el-menu-item v-else :index="item.path">
         <el-icon v-if="item.icon">
            <component :is="Icons[item.icon]"></component>
         </el-icon>
         <span>{{ item.title }}</span>
      </el-menu-item>
   </template>
</template>

<script setup>
// 用一个对象接收所有的图标组件，并将该对象命名为 Icons
import * as Icons from "@element-plus/icons-vue";
import SubMenu from "./SubMenu.vue";

defineProps({
   menuData: {
      type: Array,
      default: () => [],
   },

});
</script>

<style lang="scss" scoped>
::v-deep .el-menu-item.is-active {
 
   background-color: #6860ff53;
}

</style>
